<!--
 * @Author: LiYuan
 * @Date: 2021-03-24 09:07:10
 * @LastEditTime: 2021-12-13 09:45:17
 * @LastEditors: wishchan
 * @Description: 
 * You build it, You run it.
-->
<template>
  <biz-form-remote-select
    :field="field"
    :placeholder="placeholder"
    :remote-method="remoteMethod"
    :value="selectValue"
    @input="updateSelectValue"
    :multiple='multiple'
    :value-key="valueKey"
    :collapsed="collapsed"
  >
    <div class="customer-template-option" slot="option" slot-scope="{ option }">
      <h3>{{ option.name }}</h3>
      <p class="customer-template-option-content">
        <span class="customer-template-option-content-text">
          <label>{{$t('common.fields.phone.displayName')}}：</label>
          <span>{{ option.lmPhone || '' }}</span>
        </span>
        <span class="customer-template-option-content-text">
          <label>{{$t('common.fields.serialNumber.displayName')}}：</label>
          <span>{{ option.serialNumber }}</span>
        </span>
        <span v-if="showLinkMan" class="customer-template-option-content-text">
          <label>{{$t('common.fields.contact.displayName')}}：</label>
          <span>{{ option.lmName }}</span>
        </span>
      </p>
    </div>
  </biz-form-remote-select>
</template>

<script>
import { t } from '@src/locales'

export default {
  name: 'biz-search-customer-select',
  props: {
    placeholder: {
      type: String,
      default: t('common.placeholder.selectCustomer')
    },
    remoteMethod: {
      type: Function,
    },
    value: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: false
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    showLinkMan: {
      type: Boolean,
      default: false
    },
    field: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      selectValue: this.value.slice(),
    }
  },
  watch: {
    'value'(newValue) {
      this.selectValue = newValue.slice();
    }
  },
  methods: {
    updateSelectValue(value) {
      this.$emit('input', value);
    }
  }
}
</script>

<style lang="scss">
.customer-template-option-content {
  display: flex;
  justify-content: space-between;
  line-height: 24px;
  &-text {
    display: flex;
    align-items: center;

    label {
      padding: 0;
    }

    span {
      line-height: 24px;
    }

  }
}
</style>